<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>白嫖电影</title>

    <!-- === CSS === -->
    <link rel="stylesheet" href="bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/ionicons.css">
    <link rel="stylesheet" href="css/app.css">

    <style>
        .navbar-form{
            position: relative;
            margin-top: 60px;
            width: 100%;

        }

        .movie-search-items{
            color: #fdfdfd;
            border: 1px solid #E82027;
            border-radius: 12px;
        }

        dl dd,dl dt{
            padding: 10px 20px;
        }

        dl dt{
            text-decoration: underline;
        }

        dl dd{
            color: #dadada;
            text-indent: 2em;
            #background-color: lightgrey;
        }

        #movie-list-pager li.active{
            color: #E82027;
        }
    </style>
</head>
<body>

<!--=== 电影网站的导航栏开始 ===-->
<header class="header" style="background: #17181A;width: 100%; height: 62px;">
    <iframe id="movie-nav-bar" src="movie-header-nologin.html" style="width:100%; height: 62px;" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</header>
<!--=== 电影网站的导航栏结束===-->


<!--=== movies 7 ===-->
<section class="movies movie-7 movie-box movie-modify-7-2" style="height: 160px">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <form class="navbar-form form-inline">
                    <div style="width: 80%; margin: 0 auto;">
                        <div style="display: flex">
                            <div class="input-group-addon">
                                <i class="glyphicon glyphicon-search"></i>
                            </div>
                            <input type="text" class="form-control" id="keyword" style="color: #fefefe;border-color:#E82027; " placeholder="搜索"/>
                            <button type="button" class="btn btn-primary"  style="background-color: #E82027" onclick="elasticSearch()">搜索</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</section>

<!--=== movies 1 ===-->
<section class="movies movie-1">
    <div class="container">
        <div class="row">
            <div id="movie-list" class="col-12 movie-search-list">
                <!--
                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>

                <dl class="movie-search-items">
                    <dt><span>流浪地球2</span>(<span>2023-01-21</span>)</dt>
                    <dt>导演：<span>吴京</span>&nbsp;&nbsp;时长：<span>208</span>.mins</dt>
                    <dd>
                        该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>
                -->

            </div>

            <div style="margin: 0px auto">
                <ul class="pagination" id="movie-list-pager">
                    <!--
                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    -->
                </ul>
            </div>
        </div>
    </div>
</section>


<!--=== Modal For All Videos ===-->
<div class="modal popup-video fade" id="call-video" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="close" data-dismiss="modal" aria-label="Close"><i class="ion ion-ios-close-outline"></i>
                </div>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                            allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!--=== footer area ===-->
<section class="footer-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-logo"><img src="images/small-image/moviez-logo.png" alt="footer logo"></div>
                <div class="subscribe">
                    <p>做中国影迷最喜欢的免费电影资源库！<br>我们的口号是：永远白嫖，永不收费！</p>
                </div>

            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>商务合作</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">招商引资</a></li>
                        <li class=""><a href="#">意见投诉</a></li>
                        <li class=""><a href="#">我要求片</a></li>
                        <li class=""><a href="#">版权声明</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>友情链接</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">豆瓣网</a></li>
                        <li class=""><a href="#">中国电影网</a></li>
                        <li class=""><a href="#">1080影视大全</a></li>
                        <li class=""><a href="#">爱奇艺</a></li>
                        <li class=""><a href="#">牛牛编程</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>投资者关系</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">关于我们</a></li>
                        <li class=""><a href="#">公司简介</a></li>
                        <li class=""><a href="#">发展历程</a></li>
                        <li class=""><a href="#">加入我们</a></li>
                        <li class=""><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <hr class="d-md-none d-lg-block">
        </div>


        <hr>
        <div class="row">
            <div class="col-12">
                <div class="footer-wrap text-center">
                    <!--ul class="list-inline social-icon">
                        <li class="list-inline-item"><i class="ion ion-social-twitter"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-linkedin"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-dribbble-outline"></i></li>
                    </ul-->
                    <div class="footer-tag">2018-2023 &copy; 华清远见 | 作者：西蒙牛</div>
                </div>
                <div style="text-align: center;color: #ccc">
                    [<a href="admin/login.html">后台管理</a>]
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ==== js ==== -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/app.js"></script>
<script src="js/util/outils.min.js"></script>
<script src="js/api/baseUrl.js"></script>

<script src="js/auth.js"></script>
<script src="js/api/movie.js"></script>

<script type="module">
    let isLogin = await authLoginStatus().then(resp=>{
        console.log("-------在login.html页面中判断的登录状态-------")
        console.log(resp);
        return resp;
    });

    if(isLogin){
        $("#movie-nav-bar").prop("src",'movie-header-islogin.html')
    }else{
        $("#movie-nav-bar").prop("src",'movie-header-nologin.html')
    }
</script>

<script>

    let pager = {

    }; //分页对象；

    let movieList=[]; //搜索出来的电影集合
    let currentKeyword = '';
    function  elasticSearch(){
        let  keyword = $("#keyword").val()
        currentKeyword = keyword;
        elasticSearchMoviesByKeyword(keyword, 1).then(resp=>{
            if(resp.code === 200){
                pager = resp.data;
                movieList = resp.data.content;
                $("#keyword").val(''); //把搜索框重新清空...
                refreshMovieList(); //重新绘制电影列表
            }
        })
    }

    function  changePagerList(currentPageNumber){
        console.log("------执行changePagerList--------")
        console.log(currentKeyword+","+pager.number);
        elasticSearchMoviesByKeyword(currentKeyword,currentPageNumber).then(resp=>{
            if(resp.code === 200){
                pager = resp.data;
                console.log("---------in==>changePagerList------------")
                console.log(resp.data.content)
                movieList = resp.data.content;
                $("#keyword").val(''); //把搜索框重新清空...
                refreshMovieList(); //重新绘制电影列表
            }
        })
    }

    function refreshMovieList(){
        $("#movie-list").empty();
        let html = ''

        for(let i=0;i<movieList.length;i++){
            let m = movieList[i];
            html += `<dl class="movie-search-items">
                    <dt><span>${m.name}</span>(<span>${m.playDate}</span>)</dt>
                    <dt>导演：<span>${m.director}</span>&nbsp;&nbsp;时长：<span>${m.duration}</span>.mins</dt>
                    <dd>
                        ${m.introduce}
                    </dd>
                    <div style="text-align: end">
                        <button type="button" class="btn btn-primary btn-small"  style="background-color: #E82027">详情</button>
                    </div>
                </dl>`;
        }

        $("#movie-list").append(html);

        refreshMoviePager();
    }

    //重写绘制分页的方法
    function refreshMoviePager(){
        console.log('------开始重新绘制分页------')
        $("#movie-list-pager").empty();
        let html = ''
        if(pager.first){
            html +=`<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>`
        }else{
            html +=`<li class="page-item"><a class="page-link" href="javascript:changePagerList(${pager.number})">上一页</a></li>`
        }
        for(let i=0;i<pager.totalPages;i++){
            if(i === pager.number){
                html+= `<li class="page-item active"><a class="page-link" href="javascript:changePagerList(${i+1})">${i+1}</a></li>`;
            }else{
                html+= `<li class="page-item"><a class="page-link" href="javascript:changePagerList(${i+1})">${i+1}</a></li>`;
            }

        }
        if(pager.last){
            html +=`<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>`
        }else{
            html +=`<li class="page-item"><a class="page-link" href="javascript:changePagerList(${pager.number+2})">下一页</a></li>`
        }

        $("#movie-list-pager").append(html);

    }
</script>
</body>
</html>
